<template>
  <div
    class="NavigationBar_box"
    :class="{
      dark: theme.state.themeState == 'drak',
      light: theme.state.themeState == 'light',
    }"
  >
    <div class="NavigationBarWapper">
      <div
        class="search"
        :class="{
          darkLight: theme.state.themeState == 'drak',
          lightDark: theme.state.themeState == 'light',
        }"
      >
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="请输入查询博客" />
      </div>
      <ul class="navBtn">
        <router-link
          v-for="item in navList"
          :exact="item.exact"
          :key="item.id"
          :to="item.link"
        >
          <li>
            <template v-if="item.id == 5 && theme.state.login.isLoginState">
              <img
                style="
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  padding-left: 20px;
                  padding-right: 20px;
                "
                :src="theme.state.login.userInfo.headerImg"
                alt="头像"
              />
            </template>
            <template v-else>
              <i
                class="iconfont"
                :class="item.iconFont"
                :title="item.title"
              ></i>
            </template>
          </li>
        </router-link>
      </ul>
      <div class="cpmBtn">
        <div class="wapper" v-if="!theme.state.login.isLoginState">
          <div
            class="loginBtn"
            :class="{
              light_btn_login: theme.state.themeState == 'light',
            }"
            @click="loginShadowFn"
          >
            登录
          </div>
          <div
            class="resBtn"
            :class="{
              darkLight: theme.state.themeState == 'drak',
              light_btn_res: theme.state.themeState == 'light',
            }"
            @click="resShadowFn"
          >
            注册
          </div>
        </div>
        <div
          v-else
          class="wapper loginOK"
          :class="{
            darkLight: theme.state.themeState == 'drak',
            light_b_w: theme.state.themeState == 'light',
          }"
        >
          <i class="iconfont icon-setting"></i>
          <!-- 下拉菜单 -->
          <div
            class="downMuneList"
            :class="{
              darkLight: theme.state.themeState == 'drak',
              light_btn_res: theme.state.themeState == 'light',
            }"
          >
            <router-link to="/Set">
              <li>资料设置</li>
            </router-link>
            <router-link to="/Set/AccountSecurity">
              <li>账号安全</li>
            </router-link>
            <router-link to="/Set/Privacy">
              <li>隐私设置</li>
            </router-link>
            <router-link to="/Set/Message">
              <li>消息设置</li>
            </router-link>
            <router-link to="/Set/Shielding">
              <li>屏蔽设置</li>
            </router-link>
            <router-link to="/Set/Preferences">
              <li>使用偏好</li>
            </router-link>
            <li @click="loginOut">退出登录</li>
          </div>
        </div>
        <div class="write" title="发表博文" @click="witreBlog">
          <i class="iconfont icon-wenbenshuru"></i>
        </div>
        <div
          class="theme"
          :class="{
            darkLight: theme.state.themeState == 'drak',
            light_b_w: theme.state.themeState == 'light',
            theme_Login: theme.state.login.isLoginState == 1,
          }"
          id="themeBtn"
          title="切换网页配色"
          @click="themeChangeFn"
        >
          <i
            v-if="theme.state.themeState == 'drak'"
            class="iconfont icon-yueliang"
          ></i>
          <i v-else class="iconfont icon-taiyang" style="font-size: 25px"></i>
        </div>
      </div>
    </div>
  </div>
  <div
    class="shadowBox"
    v-show="LoginOrResState > 0"
    @click.stop="closeShadowFn($event)"
  >
    <transition name="el-zoom-in-center">
      <template v-if="LoginOrResState == 1">
        <LoginCompBox :loginClose="closeShadowFn"></LoginCompBox>
      </template>
      <template v-else-if="LoginOrResState == 2">
        <ResCompBox></ResCompBox>
      </template>
      <template v-else-if="LoginOrResState == 3">
        <WriteArticle></WriteArticle>
      </template>
    </transition>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import LoginCompBox from "../LoginComp/LoginComp.vue";
import ResCompBox from "../ResComp/ResComp.vue";
import WriteArticle from "../WriteArticle/WriteArticle.vue";
import { useStore } from "vuex";
@Options({
  components: {
    LoginCompBox,
    ResCompBox,
    WriteArticle,
  },
  // 初始化状态;
  created() {
    if (!localStorage.getItem("theme")) {
      localStorage.setItem("theme", "drak");
    }
    this.theme.dispatch(
      "changeThemeState",
      localStorage.getItem("theme") || "light"
    );
  },
  beforeCreate() {
    this.theme.dispatch("userInfoChange", "");
  },
})
export default class NavigationBar extends Vue {
  navList: Array<Object> = [
    {
      id: 1,
      iconFont: "icon-home",
      exact: true,
      title: "大厅",
      link: "/home",
    },
    {
      id: 2,
      iconFont: "icon-tv",
      exact: true,
      title: "短视频",
      link: "/TV",
    },
    {
      id: 3,
      iconFont: "icon-hot",
      exact: true,
      title: "火爆",
      link: "/Hot",
    },
    {
      id: 4,
      iconFont: "icon-email",
      exact: true,
      title: "私信",
      link: "/Email",
    },
    {
      id: 5,
      iconFont: "icon-yonghu",
      exact: true,
      title: "关于我",
      link: "/about/9527",
    },
  ];
  theme: any = useStore();
  LoginOrResState: Number = 0;
  //切换主题
  themeChangeFn() {
    const dom: any = document.querySelector("html");
    if (localStorage.getItem("theme") == "light") {
      localStorage.setItem("theme", "drak");
      this.theme.dispatch("changeThemeState", "drak");
      dom.classList.add("dark");
    } else {
      localStorage.setItem("theme", "light");
      this.theme.dispatch("changeThemeState", "light");
      dom.classList.remove("dark");
    }
  }
  //展示登陆组件
  loginShadowFn() {
    this.LoginOrResState = 1;
  }
  //展示注册组件
  resShadowFn() {
    this.LoginOrResState = 2;
  }
  //展示写文章界面
  witreBlog() {
    if (localStorage.getItem("token")) {
      this.LoginOrResState = 3;
    } else {
      this.loginShadowFn();
    }
  }
  //关闭遮罩层
  closeShadowFn(e: any) {
    if (
      [...e.target.classList].indexOf("LoginCompBox") !== -1 ||
      [...e.target.classList].indexOf("ResCompBox") !== -1 ||
      [...e.target.classList].indexOf("WriteArticleBox") !== -1 ||
      [...e.target.classList].indexOf("icon-close") !== -1
    ) {
      this.LoginOrResState = 0;
    }
  }
  //注销
  loginOut() {
    localStorage.removeItem("token");
    localStorage.removeItem("timer");
    localStorage.removeItem("userID");
    location.reload();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>
